<template>

  <el-container style="height:100%;">
    <!--导航栏-->
    <el-header class="header" style="padding: 0px;height: 80px;">
      <HeaderDemo />
    </el-header>
    <!--中间部分-->
    <el-main>
      <BackgroundVideo />

      <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
      <!-- <div class="search-box">
          <el-input v-model="input" placeholder="请输入搜索内容" class="custom-input" clearable />
          <button class="search-litle-box" @click="handleSearch">
            <img src="../../public/images/search01.png" alt="Button Icon" style="width: 40px;height: 40px;" />
          </button>
        </div> -->

      <div class="second-page">
        <div class="describe-box">
          <div class="describe-little-box1">
            <img src="../../public/images/hailiang02.png" style="width: 60px;height: 55px;" />
            <h1>海量剧本</h1>
            <p class="describe-text">剧本世界，应有尽有</p>
            <p class="describe-text">海量资源，一键开启你的创作之旅</p>
          </div>
          <div class="describe-little-box1">
            <img src="../../public/images/fengfu02.png" style="width: 60px;height: auto;" />
            <h1>题材丰富</h1>
            <p class="describe-text">剧本宝库，创意满满</p>
            <p class="describe-text">这里是故事的起点，也是灵感的源泉</p>
          </div>
          <div class="describe-little-box1">
            <img src="../../public/images/duoyuan02.png" style="width: 60px;height: 55px;" />
            <h1>形式多元</h1>
            <p class="describe-text">创意无界，剧本无限</p>
            <p class="describe-text">走进剧本的海洋，遨游多元文化的长廊</p>
          </div>
        </div>
      </div>

      <!-- <div class="third-page"> -->
      <!-- <CategoryPage /> -->
      <img src="../../public/images/selected-scripts.PNG" class="selected-scripts">
      <!-- <ScriptCard /> -->
      <div class="work-container">
        <div v-for="(item, index) in worklist" :key="index">
          <div  class="item-container">
            <img src="../../public/imgs/booktitle.gif" alt="" style="width: 50px;margin-bottom: 15px;">
          <h2 style="text-align: center; margin: 0;">{{ item.typename }}</h2>
          <hr></hr>
          </div>

          <el-row :gutter="2">
            <el-col v-for="i in item.data" :key="i" :xs="6" :sm="6" :md="6" :lg="4" :xl="3" class="work-item">
              <el-card class="work-card" @click="router.push('/workprofile/'+i.wid)">
                  <img :src="'http://localhost:8080/api/images/'+i.wimage" alt="小说封面" class="novel-image" />
                  <div class="novel-info">
                    
                    <h3 class="novel-title">{{ i.wname }}</h3>
                    <p class="novel-description">简介：{{ i.introduction.length > 6 ? i.introduction.substring(0,6)+'...' : i.introduction }}</p>
                    <!-- <p class="novel-tags">标签: </p> -->
                  </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

      </div>
      <!-- </div> -->
      <div class="fourth-page">
        <img src="../../public/images/SCRIPT.jpg" style="width: 600px;height: 400px;margin-top: 50px;">
        <div>
          <p class="g">多元化的创意剧本，多元化的创意设计</p>
          <!-- <el-carousel :interval="3000" type="card" class="carousel-box">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <img :src="image.src" :alt="image.alt" style="width: 100%; height: 350px;">
            </el-carousel-item>
          </el-carousel> -->
        </div>

      </div>
    </el-main>
    <!--底部内容-->
    <el-footer style="padding: 0px;">
      <FooterComp />
    </el-footer>

  </el-container>
</template>

<script lang="ts" setup>
import { ref, inject, reactive, onMounted } from 'vue';
import BackgroundVideo from '../components/BackgroundVideo.vue';
import FooterComp from '../components/FooterComp.vue';
import HeaderDemo from '../components/HeaderDemo.vue';
import ScriptClassify from '../components/ScriptClassify.vue';
import CategoryPage from '../components/CategoryPage.vue';
import Carousel from '../components/Carousel.vue';
import ScriptCard from '../components/ScriptCard.vue';
import NewsBox from '../components/NewsBox.vue';
import { useRoute, useRouter } from 'vue-router'
// 引入状态管理文件
import { useTokenStore } from '../stores/token'
// import { Carousel, FormInstance } from 'ant-design-vue';
import CryptoJS from 'crypto-js';
import CategoryPageVue from '../components/CategoryPage.vue';
const axios = inject('axios') //注入 axios
// 创建路由对象，用于编程式导航
const router = useRouter()
// 创建 Token 状态管理 Store
const userStore = useTokenStore()
// 使用 ref 来定义响应式变量
const input = ref('');

// 获取登录的 Token
const token = ref(userStore.getToken())
// 保存剧本列表
const worklist = ref({});
//解密token
function getToken() {
  const encryptedToken = localStorage.getItem('token');
  if (encryptedToken) {
    const secretKey = 'your_secret_key'; // 使用相同的密钥
    const bytes = CryptoJS.AES.decrypt(encryptedToken, secretKey);
    const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
    return decryptedToken;
  }
  return null;
}

//用户数据
const user = ref({})

//获取用户信息
function initUser() {
  console.log('获取用户信息')
  //判断用户是否登录
  //判断用户是否登录
  const Token = getToken();
  console.log('Token:' + Token)
  if (Token != '') {
    axios({
      method: 'get',
      url: 'http://localhost:8080/user/getuser',
      headers: {
        Authorization: 'Bearer ' + Token
      }
    })
      .then(function (response) {
        if (response.data.code == '200') {
          user.value = response.data.user
          console.log("用户信息获取成功：" + JSON.stringify(response.data.user))
          console.log("用户信息获取成功：" + response.data.user.uname)
          user.value = response.data.user
          console.log("user.value:=====>" + user.value)
          //初始化表单
          dataForm.uname = user.value.uname
          dataForm.phone = user.value.phone
          dataForm.user_synopsis = user.value.user_synopsis
          dataForm.email = user.value.email
          dataForm.account = user.value.account
          // 仅在用户上传新头像后更新 headlmg
          if (user.value.headlmg) {
            dataForm.headlmg = user.value.headlmg; // 保留用户头像的值
            avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL
          }
          console.log("user.headlmg:" + user.value.headlmg)
          // avatarUrl.value = '/svr/api/image/display/head/' + user.value.avatar
          //avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL 
          console.log("user.avater:" + avatarUrl.value)
          console.log("user:" + user.value)
        }else{
          console.log("获取哟关乎储蓄哦："+response.data.code);
          

        }
      })
      .catch(function (error) {
        console.log(error)
        console.log("过期：" + error.response.status)
        // if (error.response.status == 401) {
        //   console.log("过期2：" + error.response.status)
        //   token.value = ''
        //   userStore.setToken('')

        //   //提示
        //   ElMessage({
        //     message: '请重新登录',
        //     type: 'success',
        //     plain: true
        //   })
        //   // router.push('/login')
        // }
      })
  }
}

//查询剧本列表
const getworklist = () => {
  return axios.get('http://localhost:8080/api/getworklist')
    .then(response => {
      // 处理响应数据
      console.log('搜索结果：' + response.data);
      worklist.value = response.data.data;
      console.log("SearchResults:" + JSON.stringify(worklist.value, null, 2));
      // console.log('搜索结果2：', response.data.data[0]);
    })
    .catch(error => {
      // 处理错误
      console.error(error);
    })
}

//搜索按钮点击事件
const handleSearch = () => {
  console.log('搜索内容：', input.value);
  if (input.value) {
    // 使用 Vue Router 导航到搜索结果页面，并传递搜索参数
    router.push({
      name: 'SearchResults',
      query: { search: input.value },
    });
  }
};
const clearSearch = () => {
  input.value = '';
};

// 完成初始渲染并创建 DOM 节点后，进行页面加载
onMounted(() => {
  //初始化数据
  initUser();
  getworklist();
})
</script>

<style scoped>
.first-age {
  height: 500px;
  width: 100%;
}

.second-page {
  width: 100%;
  height: 250px;
  /* background-color: rgb(178, 178, 233); */
  /* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(140, 210, 231)), to(#fafafa)); */
  /* background: url('../../public/images/bg03.jpg'); */
  margin-top: 30%;
  position: relative;
  margin-bottom: 10%;
}

.search-box {
  width: 710px;
  height: 70px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  /* left: 50%;   */
  transform: translate(50%, -50%);
}

.search-litle-box {
  width: 110px;
  height: 70px;
  border-radius: 5px;
  border: 0.5px solid rgb(206, 199, 199);
  /* box-shadow: 0px 0px 50px 5px rgb(255, 255, 255); */
  background-color: rgb(255, 255, 255);
  float: right;
}

.custom-input {
  width: 600px;
  height: 70px;
  /* top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%); */
}

.describe-box {
  width: 1200px;
  height: 200px;
  /* background-color: red; */
  /* margin: 0 auto; */
  left: 50%;
  transform: translateX(-50%);
  /* 修正居中偏移 */
  display: flex;
  bottom: 0;
  position: absolute;
}

.describe-little-box1 {
  margin-top: 30px;
  width: 400px;
  height: 200px;
  /* background-color: rgb(242, 184, 184); */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.describe-text {
  color: grey;
  margin-top: -15px;
}

.third-page {
  width: 100%;
  height: 1000px;
  margin-top: 20px;
  /* background-color: pink; */
}

.selected-scripts {
  width: 400px;
  height: 90px;
  margin: 0 auto;
  display: block;
  margin-bottom: 60px;
  margin-top: 50px;

}

.fourth-page {
  width: 100%;
  height: 550px;
  /* background-color: black; */
  margin-top: 0px;
  display: flex;
}

.carousel-box {
  width: 750px;
  height: 350px;
  float: right;
  margin-right: 30px;
  margin-top: 40px;
}

.g {
  color: rgb(0, 0, 0);
  float: right;
  margin-top: 200px;
  margin-left: 100px;
  font-weight: bold;
  font-size: 45px;
}

.carousel_card_box {
  width: 100%;
  height: 300px;
  /* background-color: red; */
  display: flex;
}

.card {
  padding: 0;
  width: 270px;
  /* 确保卡片占据整个网格单元 */
  height: 200px;
  margin-left: 30px;
  margin-top: 50px;
}

.card:hover {
  transform: scale(1.1);
  /* 放大盒子 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 显示盒子阴影 */
}

.work-container {
  width: 100%;
  height: auto;

}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  /* 你可以根据需要调整高度 */
  background-color: rgba(0, 0, 0, 0.3);
  /* 黑色透明长方形 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .overlay {
  opacity: 1;
}
.novel-image{
  width: 170px;
  height: 250px;
}
.work-card{
  margin-bottom: 20px;
  width: 215px;
}

.item-container {
  display: flex; /* 设为Flexbox容器 */
  align-items: center; /* 垂直居中对齐 */
}

.item-container h2 {
  margin-right: 10px; /* 为文本和分割线之间添加间距 */
}

.item-container hr {
  flex-grow: 1; /* 让分割线撑满剩余空间 */
  border: none; /* 去掉默认边框 */
  border-top: 1px solid #ccc; /* 自定义边框样式 */
}
</style>